<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h2>直接通过FormData</h2>
    <!-- 注意，文件在input标签 -->
    <input type="file" accept="image/*" >
    <img src="" alt="" />
    <button>上传</button>

    <script src="./lib/axios.js"></script>
    <script>
        const btn = document.querySelector('button')
        const ipt = document.querySelector('input')
        const img = document.querySelector('img')

        const api = 'http://ajax-api.itheima.net/api/file'

        btn.addEventListener('click', function(){
            // e.target.files[0]
            console.log(ipt.files[0])

            // 1. 传文件，需要用到 FormData
            const data = new FormData()
            // data.append('avator', 文件)
            data.append('avatar', ipt.files[0])

            // 2. 发送请求
            axios({
                url:api,
                method:'post',
                data
            }).then(res => {
                console.log(res)
                img.src = res.data.data.url
            })
        })
    </script>
</body>
</html>